<template>
  <el-drawer
    :model-value="isShowUserDetail"
    :title="$t('客户详情')"
    size="35%"
    @close="emit('close')"
  >
    <div class="flex justify-between mb-4 detailRow">
      <span class="rowName" style="color: #333">{{ $t("客户状态") }}</span>
      <span class="rowValue">
        <el-tag :type="getUserStatusName(detailInfo.sys_review_status)?.type">{{
          getUserStatusName(detailInfo.sys_review_status)?.name
        }}</el-tag>
      </span>
    </div>
    <h4 class="mb-4">{{ $t("公司信息") }}</h4>
    <el-card shadow="always" v-loading="loading">
      <div
        v-for="(item, index) in infoDetailList"
        :key="index"
        v-show="item.isShow"
        class="flex items-start justify-between mb-2"
      >
        <span class="mb-2 rowName">{{ item.name }}</span>
        <span class="rowValue">{{ item.value }}</span>
      </div>
    </el-card>
    <h4 class="mt-4 mb-4">{{ $t("个人信息") }}</h4>
    <el-card shadow="always" v-loading="loading">
      <div
        v-for="(item, index) in userDetailList"
        :key="index"
        v-show="item.isShow"
        class="flex items-start justify-between mb-2"
      >
        <span class="mb-2 rowName">{{ item.name }}</span>
        <span class="rowValue">{{ item.value }}</span>
      </div>
      <div class="flex items-center justify-start w-full imgStyle">
        <img :src="detailInfo.file_idcard_front" class="flex-grow mr-2" />
        <img :src="detailInfo.file_idcard_back" class="flex-grow mr-2" />
        <img :src="detailInfo.file_idcard_hand" class="flex-grow mr-2" />
      </div>
    </el-card>
  </el-drawer>
</template>
<script setup>
import { ref, watch, computed, reactive } from "vue";
import { getUserInfo } from "@/api/VAAccount";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps({
  isShowUserDetail: {
    type: Boolean,
    default: false,
  },
  userId: {
    type: Number,
    default: "",
  },
});
const emit = defineEmits(["close"]);

const loading = ref(false);

watch(
  () => props.userId,
  (val) => {
    if (val) {
      getUserDetail();
    }
  },
  { immediate: true }
);

const detailInfo = reactive({});

// 公司信息
const infoDetailList = computed(() => {
  let arr = [
    {
      name: `${t("公司名称")}`,
      value: detailInfo.company_name || "--",
      isShow: true,
    },
    {
      name: `${t("VA-银行账号")}`,
      value: detailInfo.card_number || "--",
      isShow: true,
    },
    {
      name: `${t("银行国家")}`,
      value: detailInfo.bank_country || "--",
      isShow: true,
    },
    {
      name: `${t("银行名称")}`,
      value: detailInfo.bank_name || "--",
      isShow: true,
    },
    {
      name: `${t("银行地址")}`,
      value: detailInfo.bank_address || "--",
      isShow: true,
    },
    {
      name: `${t("银行账户名称")}`,
      value: detailInfo.card_name || "--",
      isShow: true,
    },
    {
      name: `${t("持卡人国家")}`,
      value: detailInfo.card_country || "--",
      isShow: true,
    },
    {
      name: `${t("持卡人地址")}`,
      value: detailInfo.card_address || "--",
      isShow: true,
    },
    {
      name: `${t("VA-账户币种")}`,
      value: detailInfo.currency || "--",
      isShow: true,
    },
  ];
  return arr;
});

// 个人信息
const userDetailList = computed(() => {
  let arr = [
    {
      name: `${t("VA-持卡人姓名")}`,
      value: detailInfo.real_name || "--",
      isShow: true,
    },
    {
      name: `${t("电话号码")}`,
      value: detailInfo.contact || "--",
      isShow: true,
    },
  ];
  return arr;
});

const getUserDetail = async () => {
  try {
    loading.value = true;
    const res = await getUserInfo({
      id: props.userId,
    });
    if (res) {
      for (const item in res) {
        detailInfo[item] = res[item];
      }
    }
    loading.value = false;
  } catch (e) {
    loading.value = false;
    console.log(e);
  }
};

const reviewStatus = computed(() => {
  return [
    { key: 0, name: `${t("审核中")}`, type: "warning" },
    { key: 1, name: `${t("审核成功")}`, type: "success" },
    { key: 2, name: `${t("审核失败")}`, type: "danger" },
  ];
});

const getUserStatusName = (status) => {
  if (status > -1) {
    return reviewStatus.value.find((i) => status === i.key);
  }
};
</script>
<style lang="scss" scoped>
.rowName {
  min-width: 30%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #777;
}

.rowValue {
  word-break: break-all;
  text-align: right;
}
.imgStyle {
  img {
    width: 30%;
  }
}
</style>
